<div class="subheader" ng-if="model.form">
  <div class="fixed-container">
    <div class="btn-group pull-right">
      <button class="btn btn-default" ng-click="openEditor()" ng-if="model.form.latestVersion" type="button">
        <i class="glyphicon glyphicon-edit icon-and-label"></i> {{'FORM.ACTION.OPEN-IN-EDITOR' | translate}}
      </button>
      <button class="btn btn-default" ng-click="useAsNewVersion()" ng-if="!model.form.latestVersion" type="button">
        {{'FORM.ACTION.USE-AS-NEW-VERSION' | translate}}
      </button>
    </div>
    <div class="btn-group pull-right">
      <button class="btn btn-default" ng-click="editForm()" ng-disabled="!model.form.latestVersion"
              title="{{'FORM.ACTION.EDIT' | translate}}"
              type="button">
        <i class="glyphicon glyphicon-pencil"></i>
      </button>
      <button class="btn btn-default" ng-click="duplicateForm()" ng-disabled="!model.form.latestVersion"
              title="{{'FORM.ACTION.DUPLICATE' | translate}}"
              type="button">
        <i class="editor-icon editor-icon-copy"></i>
      </button>
      <button class="btn btn-default" ng-click="deleteForm()" ng-disabled="!model.form.latestVersion"
              title="{{'FORM.ACTION.DELETE' | translate}}"
              type="button">
        <i class="glyphicon glyphicon-trash"></i>
      </button>
    </div>
    <div class="pull-right">
      <a class="action" ng-click="returnToList()">&larr; {{'GENERAL.ACTION.RETURN-TO-LIST' | translate}}</a>
    </div>
    <h2><span class="version">v{{model.form.version}}</span>{{model.form.name}}</h2>
    <div class="clearfix">
      <div class="col-xs-4 details">
        <span><i class="glyphicon glyphicon-user"></i>{{'FORM.DETAILS.CREATED-BY' | translate:model.form}}</span>
        <span><i class="glyphicon glyphicon-pencil"></i>{{'FORM.DETAILS.LAST-UPDATED-BY' | translate:model.form}}</span>
      </div>
      <div class="col-xs-8 details clearfix">
        <div class="related btn-group">
          <button class="btn btn-subtle" id="toggle-history" ng-click="toggleHistory($event)"
                  title="{{'FORM.ACTION.EDIT' | translate}}"
                  type="button">
            {{'FORM.DETAILS.HISTORY-TITLE' | translate}} <span class="counter" ng-show="model.versions.data.length">{{model.versions.data.length}}</span>
          </button>
        </div>
        <p ng-if="model.form.description">
          {{model.form.description}}
        </p>
      </div>
    </div>
  </div>
</div>
<div auto-height class="container-fluid content" ng-if="model.form" offset="40">
  <div class="center-pane" style="overflow-x:hidden">

    <div class="content roweditor-canvas container-fluid" ng-controller="FormReadonlyViewController">
      <div class="content-canvas-wrapper" id="canvasSection" ng-class="{'editing': editState.editing}">

        <ul class="form-canvas content-canvas" style="min-height:400px; width: 100%">

          <li class="form-field-wrapper" ng-repeat="field in formItems track by field._guid">
            <div edit-state="editState" form-builder-element form-element="field" form-mode="formMode"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
